@extends('Home.Layout.login')
@section('content')

  <div class="nc-register-bg">
    <div class="nc-register-box">
      <div class="nc-register-layout">
        <div class="left">
          <div class="nc-register-mode">
            <ul class="tabs-nav">
              <!-- <li><a href="#mobile">手机注册<i></i></a></li> -->
              <li><a href="#default">账号注册<i></i></a></li>
            </ul>
            <div id="tabs_container" class="tabs-container">


           <!--  <div id="mobile" class="tabs-content">
                <form id="post_form" method="post" class="nc-login-form" action="{{url('home/register/phoneinsert')}}">
                  {{csrf_field()}}
                  <input type='hidden' name='formhash' value='itZDipVPoJMsIm7CLJmtWTRGgJW_RcQ' />                
                  <input type="hidden" name="form_submit" value="ok" />
                  <input name="nchash" type="hidden" value="e45c80ab" />
                  <dl>
                    <dt>手机号：</dt>
                    <dd>
                      <input type="text" class="text" tipMsg="请输入手机号码" autocomplete="off" value="" name="phone" id="phone"  >
                    </dd>
                  </dl>
                  <div class="code-div">
                    <dl>
                      <dt>验证码：</dt>
                      <dd>
                        <input type="text" name="phonecode" class="text w100" id="image_captcha" size="10" placeholder="请输入验证码" />
                      </dd>
                    </dl>
                    <span>
                        <img src="{{url('/home/register/code')}}" alt="" name="codeimage" id="sms_codeimage">
                        <a class="makecode" href="javascript:void(0);" onclick="javascript:document.getElementById('sms_codeimage').src='/home/register/code?' + Math.random();">
                            看不清，换一张
                        </a>
                    </span>
                  </div>
                  <div class="tiptext" id="sms_text">确保上方验证码输入正确，点击下方"获取短信验证码"，并将您手机短信所接收到的“6位动态码”输入到下方短信验证，再提交下一步。</div>
                  <dl>
                    <dt>短信验证：</dt>
                    <dd>
                      <input type="text" name="sms_captcha" autocomplete="off" tipMsg="输入6位短信验证码" class="text" id="sms_captcha" size="15" />
                      <div class="c_msg_con">
                         <a href="javascript:void(0);" onClick="sendCode();" id="c_msg_a" >
                          <input type="button" value="获取短信验证码" id="dyMobileButton" style="color:#7A7AA3;font-size:14px;width:121px;height:52px;border:0px;">
                         </a>
                        <a href="javascript:void(0);" onClick="sendCode();" id="c_msg_a" ><i class="icon-mobile-phone"></i>获取短信验证码</a>
                        <span id="c_msg_mask">重新获取短信(<em id="c_msg_num">60</em>)</span>
                           
                      </div>
                    </dd>
                  </dl>
                  <div class="submit-div">
                    <input type="button" id="submitBtn" class="submit" value="下一步">
                  </div>
                </form> 

              <form style="display: none;" id="register_sms_form" class="nc-login-form" method="post" action="http://user.yoowo.com/index.php?act=connect_sms&op=register">
                  <input type="hidden" name="form_submit" value="ok" />
                  <input type="hidden" name="register_captcha" id="register_sms_captcha" value="" />
                  <input type="hidden" name="register_phone" id="register_phone" value="" />
                  <dl>
                    <dt>用户名：</dt>
                    <dd>
                      <input type="text" id="member_name" name="member_name" class="text w150" value=""/>
                    </dd>
                    <span class="note">系统生成随机用户名，可选择默认或自行修改一次。</span>
                  </dl>
                  <dl>
                    <dt>设置密码：</dt>
                    <dd>
                      <input type="text" id="sms_password" name="password" class="text w150" value=""/>
                    </dd>
                    <span class="note">系统生成随机密码，请牢记或修改为自设密码。</span>
                  </dl>
                  <dl class="mt15">
                    <dt>邮箱：</dt>
                    <dd>
                      <input type="text" id="sms_email" name="email" class="text" value="" tipMsg="输入常用邮箱作为验证及找回密码使用" />
                    </dd>
                  </dl>
                  <dl class="clause-div">
                    <dd>
                      <input name="agree" type="checkbox" class="checkbox" id="sms_clause" value="1" checked="checked" />
                      阅读并同意<a href="http://www.yoowo.com/document-agreement.html" target="_blank" class="agreement" title="阅读并同意">《服务协议》</a></dd>
                  </dl>
                  <div class="submit-div">
                    <input type="submit" value="提交注册" class="submit" title="提交注册" />
                  </div>
              </form> 
            </div>  -->
             
              <div id="default" class="tabs-content">
                <!-- 账号注册 -->
                <form id="register_form" method="post" class="nc-login-form" action="{{url('home/register/phoneinsert')}}">
                  {{csrf_field()}}
                  <!-- <input type='hidden' name='formhash' value='QHXvUS9y94fx9nRxwQYrEtPySy-iTx8' />                 -->
                  <dl>
                    <dt>用户名：</dt>
                    <dd>
                      <input type="text" id="user_name" value="{{old('username')}}" name="username" class="text" tipMsg="请使用3-15个中、英文、数字及“-”符号"/>
                    </dd>
                  </dl>
                  <dl>
                    <dt>设置密码：</dt>
                    <dd>
                      <input type="password" id="password" value="{{old('password')}}" name="password" class="text" tipMsg="6-20个大小写英文字母、符号或数字"/>
                    </dd>
                  </dl>
                  <dl>
                    <dt>确认密码：</dt>
                    <dd>
                      <input type="password" id="password_confirm" value="{{old('repassword')}}" name="repassword" class="text" tipMsg="请再次输入密码"/>
                    </dd>
                  </dl>
                  <dl class="mt15">
                    <dt>邮箱：</dt>
                    <dd>
                      <input type="text" id="email" value="{{old('email')}}" name="email" class="text" tipMsg="输入常用邮箱作为验证及找回密码使用"/>
                    </dd>
                  </dl>
                                  <div class="code-div mt15">
                    <dl>
                      <dt>验证码：</dt>
                      <dd>
                        <input type="text" id="captcha"  name="code" class="text w80" size="10" tipMsg="输入验证码" />
                      </dd>
                    </dl>
                    <span>
                          <img src="{{url('/home/register/code')}}" alt="" name="codeimage" id="codeimage">
                        <a class="makecode" href="javascript:void(0);" onclick="javascript:document.getElementById('codeimage').src='/home/register/code?' + Math.random();">
                            看不清，换一张
                        </a>
                        <!-- <img src="{{asset('Home/picture/index.php')}}" name="codeimage" id="codeimage"/> <a class="makecode" href="javascript:void(0)" onclick="javascript:document.getElementById('codeimage').src='index.php?act=seccode&op=makecode&type=50,120&nchash=e45c80ab&t=' + Math.random();">看不清，换一张</a> -->
                    </span>
                  </div>
                    <!--- 验证手机号码-->
                   <dl>
                    <dt>手机号：</dt>
                    <dd>
                      <input type="text" class="text" value="{{old('phone')}}" tipMsg="请输入手机号码" autocomplete="off" value="" name="phone" id="pc_phone"  >
                    </dd>
                  </dl>
                    <dl>
                    <dt>短信验证：</dt>
                    <dd>
                      <input type="text" name="sms_captcha" autocomplete="off" tipMsg="输入6位短信验证码" class="text" id="sms_captcha_pc" size="15" />
                      <div class="c_msg_con">
                          <a href="javascript:void(0);" onClick="sendCode();" id="c_msg_a" >
                          <input type="button" value="获取短信验证码" id="dyMobileButton" style="color:#7A7AA3;font-size:14px;width:121px;height:52px;border:0px;">
                         </a>
                        <!-- <a href="javascript:void(0);" id="c_msg_pc"><i class="icon-mobile-phone"></i>获取短信验证码</a>
                        <span id="c_msg_mask_pc">重新获取短信(<em id="c_msg_num_pc">60</em>)</span> -->
                      </div>
                    </dd>
                  </dl>
                    
                  <dl class="clause-div">
                    <dd>
                      <input name="agree" type="checkbox" class="checkbox" id="clause" value="1" checked="checked" />
                      阅读并同意<a href="http://www.yoowo.com/document-agreement.html" target="_blank" class="agreement" title="阅读并同意">《服务协议》</a></dd>
                  </dl>
                  <div class="submit-div">
                    <input type="submit" value="立即注册" class="submit"/>
                    <!-- <button>mdzz</button> -->
                  </div>
                  <input type="hidden" value="http://user.yoowo.com/article-show-article_id-16.html" name="ref_url">
                  <input name="nchash" type="hidden" value="e45c80ab" />
                  <input type="hidden" name="form_submit" value="ok" />
                </form>
                <!-- 账号注册结束 -->
                <script type="text/javascript">
                                    // 发送手机短信验证
                                    function sendCode(){
                                       
                                        // 发送短信验证码 时间倒计时
                                        var obj = $("#dyMobileButton");
                                        settime(obj);
                                        // 使用个ajax请求前台
                                        $.get("{{url('home/register/sendcode')}}",{'phone':$('#pc_phone').val()},function(msg){
                                            // if(msg==2){
                                            //     alert('发送成功');
                                            // }
                                            if(msg==1){
                                                layer.msg('该手机号已被注册', {icon: 5});
                                            }else{
                                              console.log(msg);
                                            }
                                            
                                        },'html');
                                    }
                                    /**
                                     * 发送短信验证码 时间倒计时
                                     * @type {Number}
                                     */
                                    var countdown=6; 
                                    function settime(obj) { //发送验证码倒计时
                                        if (countdown == 0) { 
                                            obj.attr('disabled',false); 
                                            //obj.removeattr("disabled"); 
                                            obj.val("获取验证码");
                                            countdown = 6; 
                                            return;
                                        } else { 
                                            obj.attr('disabled',true);
                                            obj.val("重新发送(" + countdown + ")");
                                            countdown--; 
                                        } 
                                    setTimeout(function() { 
                                        settime(obj) }
                                        ,1000) 
                                    }
                  </script>

              </div>
            </div>
          </div>
        </div>
        <div class="right">
                  <div class="reister-after">
            <h4>注册之后您可以</h4>
            <ol>
              <li class="ico01"><i></i>购买商品支付订单</li>
              <li class="ico02"><i></i>收藏商品关注店铺</li>
              <li class="ico03"><i></i>安全交易诚信无忧</li>
              <li class="ico04"><i></i>积分获取优惠购物</li>
              <li class="ico05"><i></i>会员等级享受特权</li>
              <li class="ico06"><i></i>评价晒单站外分享</li>
            </ol>
          </div>
        </div>
      </div>
    </div>
  </div>


<script>
$(function(){
    
   $('#c_msg_pc').click(function(){
       
    if($("#pc_phone").val().length == 11 && $("#captcha").val().length == 4){
    if(get_sms_captcha_pc('1')){
         $('#c_msg_mask_pc').show();
    var msg_num = setInterval(function(){
        var now_num = parseInt($('#c_msg_num_pc').html());
        if(now_num == 0){
          clearInterval(msg_num);
          $('#c_msg_mask_pc').hide();
          $('#c_msg_num_pc').html(60);
        }else{
          $('#c_msg_num_pc').html(now_num-1);
        }
    }, 1000);
    }
        
    };
   
  });
    
  $('#c_msg_a').click(function(){
    if($("#phone").val().length == 11 && $("#image_captcha").val().length == 4){
    get_sms_captcha('1');
    $('#c_msg_mask').show();
    var msg_num = setInterval(function(){
        var now_num = parseInt($('#c_msg_num').html());
        if(now_num == 0){
          clearInterval(msg_num);
          $('#c_msg_mask').hide();
          $('#c_msg_num').html(60);
        }else{
          $('#c_msg_num').html(now_num-1);
        }
    }, 1000);
    }
  });
  
})

$(function(){
  //初始化Input的灰色提示信息  
  $('input[tipMsg]').inputTipText({pwd:'password,password_confirm'});
  //注册方式切换
  $('.nc-register-mode').tabulous({
     //动画缩放渐变效果effect: 'scale'
     effect: 'slideLeft'//动画左侧滑入效果
    //动画下方滑入效果 effect: 'scaleUp'
    //动画反转效果 effect: 'flip'
  });
  var div_form = '#default';
  $(".nc-register-mode .tabs-nav li a").click(function(){
        if($(this).attr("href") !== div_form){
            div_form = $(this).attr('href');
            $(""+div_form).find(".makecode").trigger("click");
      }
  });
  
//注册表单验证
    // $("#register_form").validate({
    //     errorPlacement: function(error, element){
    //         var error_td = element.parent('dd');
    //         error_td.append(error);
    //         element.parents('dl:first').addClass('error');
    //     },
    //     success: function(label) {
    //         label.parents('dl:first').removeClass('error').find('label').remove();
    //     },
    //   submitHandler:function(form){
    //       ajaxpost('register_form', '', '', 'onerror');
    //   },
    //     onkeyup: false,
    //     rules : {
    //         user_name : {
    //             required : true,
    //             lettersmin : true,
    //             lettersmax : true,
    //             letters_name : true,
    //             remote   : {
    //                 // url :'index.php?act=login&op=check_member&column=ok',
    //                 // url :'index.php?act=login&op=check_member&column=ok',
    //                 type:'get',
    //                 data:{
    //                     user_name : function(){
    //                         return $('#user_name').val();
    //                     }
    //                 }
    //             }
    //         },
    //         password : {
    //             required : true,
    //             minlength: 6,
    //     maxlength: 20
    //         },
    //         password_confirm : {
    //             required : true,
    //             equalTo  : '#password'
    //         },
    //         email : {
    //             required : true,
    //             email    : true,
    //             remote   : {
    //                 // url : 'index.php?act=login&op=check_email',
    //                 // type: 'get',
    //                 data:{
    //                     email : function(){
    //                         return $('#email').val();
    //                     }
    //                 }
    //             }
    //         },
    //             captcha : {
    //             required : true,
    //             remote   : {
    //                 // url : 'index.php?act=seccode&op=check&nchash=e45c80ab',
    //                 // type: 'get',
    //                 data:{
    //                     captcha : function(){
    //                         return $('#captcha').val();
    //                     }
    //                 },
    //                 complete: function(data) {
    //                     if(data.responseText == 'false') {
    //                       // document.getElementById('codeimage').src='index.php?act=seccode&op=makecode&type=50,120&nchash=e45c80ab&t=' + Math.random();
    //                     }
    //                 }
    //             }
    //         },
    //         //     agree : {
    //         //     required : true
    //         // }
    //     },
        messages : {
            user_name : {
                required : '<i class="icon-exclamation-sign"></i>用户名不能为空',
                lettersmin : '<i class="icon-exclamation-sign"></i>用户名必须在3-15个字符之间',
                lettersmax : '<i class="icon-exclamation-sign"></i>用户名必须在3-15个字符之间',
        letters_name: '<i class="icon-exclamation-sign"></i>可包含“_”、“-”，不能是纯数字',
        remote   : '<i class="icon-exclamation-sign"></i>该用户名已经存在'
            },
            password  : {
                required : '<i class="icon-exclamation-sign"></i>密码不能为空',
                minlength: '<i class="icon-exclamation-sign"></i>密码长度应在6-20个字符之间',
        maxlength: '<i class="icon-exclamation-sign"></i>密码长度应在6-20个字符之间'
            },
            password_confirm : {
                required : '<i class="icon-exclamation-sign"></i>请再次输入密码',
                equalTo  : '<i class="icon-exclamation-sign"></i>两次输入的密码不一致'
            },
            email : {
                required : '<i class="icon-exclamation-sign"></i>电子邮箱不能为空',
                email    : '<i class="icon-exclamation-sign"></i>这不是一个有效的电子邮箱',
        remote   : '<i class="icon-exclamation-sign"></i>该电子邮箱已经存在'
            },
                  captcha : {
                required : '<i class="icon-remove-circle" title="请输入验证码"></i>',
        remote   : '<i class="icon-remove-circle" title="验证码不正确"></i>'
            },
            //       agree : {
            //     required : '<i class="icon-exclamation-sign"></i>请勾选服务协议'
            // }
        }
    });
});
</script>
<script type="text/javascript" src="{{asset('Home/js/connect_sms.js')}}" charset="utf-8"></script> 
<script>
$(function(){
  // $("#submitBtn").click(function(){
  //       if($("#post_form").valid()){
  //           check_captcha();
  //     }
  // });
  $("#post_form").validate({
        errorPlacement: function(error, element){
            var error_td = element.parent('dd');
            error_td.append(error);
            element.parents('dl:first').addClass('error');
        },
        success: function(label) {
            label.parents('dl:first').removeClass('error').find('label').remove();
        },
        onkeyup: false,
    rules: {
      phone: {
                required : true,
                mobile : true
            },
      captcha : {
                required : true,
                minlength: 4,
                remote   : {
                    url : 'index.php?act=seccode&op=check&nchash=e45c80ab',
                    type: 'get',
                    data:{
                        captcha : function(){
                            return $('#image_captcha').val();
                        }
                    },
                    complete: function(data) {
                        if(data.responseText == 'false') {
                          document.getElementById('sms_codeimage').src='index.php?act=seccode&op=makecode&type=50,120&nchash=e45c80ab&t=' + Math.random();
                        }
                    }
                }
            },
      sms_captcha: {
                required : function(element) {
                    return $("#image_captcha").val().length == 4;
                },
                minlength: 6
            }
    },
    messages: {
      phone: {
                required : '<i class="icon-exclamation-sign"></i>输入正确的手机号',
                mobile : '<i class="icon-exclamation-sign"></i>输入正确的手机号'
            },
      captcha : {
                required : '<i class="icon-remove-circle" title="请输入验证码"></i>',
                minlength: '<i class="icon-remove-circle" title="请输入验证码"></i>',
        remote   : '<i class="icon-remove-circle" title="验证码不正确"></i>'
            },
      sms_captcha: {
                required : '<i class="icon-exclamation-sign"></i>请输入六位短信动态码',
                minlength: '<i class="icon-exclamation-sign"></i>请输入六位短信动态码'
            }
    }
  });
    $('#register_sms_form').validate({
        errorPlacement: function(error, element){
            var error_td = element.parent('dd');
            error_td.append(error);
            element.parents('dl:first').addClass('error');
        },
        success: function(label) {
            label.parents('dl:first').removeClass('error').find('label').remove();
        },
      submitHandler:function(form){
          ajaxpost('register_sms_form', '', '', 'onerror');
      },
        rules : {
            member_name : {
                required : true,
                lettersmin : true,
                lettersmax : true,
                letters_name : true,
                remote   : {
                    url :'index.php?act=login&op=check_member&column=ok',
                    type:'get',
                    data:{
                        user_name : function(){
                            return $('#member_name').val();
                        }
                    }
                }
            },
            password : {
                required   : true,
                minlength: 6,
        maxlength: 20
            },
            email : {
                email    : true,
                remote   : {
                    url : 'index.php?act=login&op=check_email',
                    type: 'get',
                    data:{
                        email : function(){
                            return $('#sms_email').val();
                        }
                    }
                }
            },
            agree : {
                required : true
            }
        },
        messages : {
            member_name : {
                required : '<i class="icon-exclamation-sign"></i>用户名不能为空',
                lettersmin : '<i class="icon-exclamation-sign"></i>用户名必须在3-15个字符之间',
                lettersmax : '<i class="icon-exclamation-sign"></i>用户名必须在3-15个字符之间',
        letters_name: '<i class="icon-exclamation-sign"></i>可包含“_”、“-”，不能是纯数字',
        remote   : '<i class="icon-exclamation-sign"></i>该用户名已经存在'
            },
            password  : {
                required : '<i class="icon-exclamation-sign"></i>密码不能为空',
                minlength: '<i class="icon-exclamation-sign"></i>密码长度应在6-20个字符之间',
        maxlength: '<i class="icon-exclamation-sign"></i>密码长度应在6-20个字符之间'
            },
            email : {
                email    : '<i class="icon-exclamation-sign"></i>这不是一个有效的电子邮箱',
        remote   : '<i class="icon-exclamation-sign"></i>该电子邮箱已经存在'
            },
            agree : {
                required : '<i class="icon-exclamation-sign"></i>请勾选服务协议'
            }
        }
    });
});
</script>
@endsection
